import { BuildInfo } from "@/dom/BuildInfo";
import { CityWater } from "@/effect/CityWater";
import { EdgesLine } from "@/effect/EdgesLine";
import { Fire } from "@/effect/Fire";
import { FireBall } from "@/effect/FireBall";
import { modifyCityDefaultMaterial } from "@/shader/modifyCityMaterial";
import { ClickHandler } from "@/utils/clickHandler";
import { EffectManager } from "@/utils/EffectManager";
import { getBoxCenter } from "@/utils/getBoxCenter";
import * as THREE from "three";
import { BaseModel } from "./BaseModel";
export class City extends BaseModel {
//   constructor(model, scene, camera, control, dataObj) {
//     super(model, scene, camera, control)
//     this.dataObj = dataObj
//     console.log(this.dataObj, 'this.dataObj');
    
//   }
  init() {
    this.scene.add(this.model);
    this.initEffect();
    this.buildNameInfo = {
        '01-shanghaizhongxindasha': '上海中心大厦',
        '02-huanqiujinrongzhongxin': '环球金融中心',
        '03-jinmaodasha': '金茂大厦',
        '04-dongfangmingzhu': '东方明珠',
    }
    this.bindClick()
    // 给某一个具体的建筑添加火焰效果
    // this.initFire('01-shanghaizhongxindasha');
  }

  initFire(buildName) {
    const build = this.model.getObjectByName(buildName)
    const { center, size} = getBoxCenter(build)
    const fire = new Fire(this.scene, center, size)
    const fireBall = new FireBall(this.scene, center, size)
    EffectManager.getInstance().addObj(fireBall)

    setTimeout(() => {
        fire.clear()
        fireBall.clear()
        EffectManager.getInstance().removeObj(fireBall)
    }, 5000)
  }

  initEffect() {
    // 中心城市建筑材质
    const centerMaterial = new THREE.MeshBasicMaterial({
      color: 0xa8cded,
      transparent: true,
    });
    // 外围城市建筑材质
    const periphery = new THREE.MeshBasicMaterial({
      color: 0xa8cded,
      transparent: true,
    });

    // 遍历模型
    this.model.traverse((obj) => {
      if (obj.name === "Text") {
        // 隐藏自带的模型
        obj.visible = false;
        return;
      }

      if (obj.name === "Shanghai-08-River") {
        // 隐藏原本的水物体
        obj.visible = false;
        // 创建更加真实的水平物体效果
        const theWater = new CityWater(obj, this.scene);
        // 把水波纹物体添加到动效管理类中
        EffectManager.getInstance().addObj(theWater);
      }

      // 排除地板和河水物体
      if (
        obj.name !== "Shanghai-08-River" &&
        obj.name !== "Shanghai-09-Floor"
      ) {
        if (
          obj.name === "Shanghai-02" ||
          obj.name === "Shanghai-03" ||
          obj.name === "Shanghai-04" ||
          obj.name === "Shanghai-05" ||
          obj.name === "Shanghai-06" ||
          obj.name === "Shanghai-07"
        ) {
          // 非中心建筑
          obj.material = periphery;
          new EdgesLine(this.scene, obj, new THREE.Color("#666666"));
          // 添加白膜效果
          modifyCityDefaultMaterial(obj, false);
        } else {
          // 中心物体
          obj.material = centerMaterial;
          new EdgesLine(this.scene, obj, new THREE.Color("#00ffff"));
          modifyCityDefaultMaterial(obj, true);
        }
      }
    });

  }

  bindClick () {
    // 初始化，给四个建筑添加点击事件
    Object.keys(this.buildNameInfo).forEach(key => {
        // 通过建筑名拿到对应模型
        const build = this.model.getObjectByName(key)
        // 把模型添加到ClickHandler里面的list和map中
        ClickHandler.getInstance().addMesh(build, (object) => {
            // 一旦点击某个建筑，执行这里的回调，拿到中心点，创建建筑的描述信息
            const { center } = getBoxCenter(object)
            new BuildInfo(this.scene, center, this.dataObj[build.name])
        })
    })
  }
}
